<template>
  <div>
    <!-- 商品卡片 -->
    <van-card
      num="2"
      price="2.00"
      desc="描述信息"
      title="商品标题"
      thumb="http://static.wdmcake.cn/images/202102/thumb_img/2264_thumb_G_1612376408216.jpg"
    >
      <template #tags>
        <van-tag plain type="danger">实惠</van-tag>
        <van-tag plain type="danger">好吃</van-tag>
      </template>
      <template #footer>
        <van-button size="mini">按钮</van-button>
        <van-button size="mini">按钮</van-button>
      </template>
    </van-card>
    <!-- 底部 -->
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="home">
        <img
          v-if="selected == 'home'"
          src="@/assets/common/001.png"
          alt=""
          slot="icon"
        />
        <img v-else src="@/assets/common/002.png" alt="" slot="icon" />
        首页</mt-tab-item
      >
      <mt-tab-item id="liebiao">
        <img
          v-if="selected == 'liebiao'"
          src="@/assets/common/003.png"
          alt=""
          slot="icon"
        />
        <img v-else src="@/assets/common/004.png" alt="" slot="icon" />
        分类</mt-tab-item
      >
      <mt-tab-item id="shop">
        <img
          v-if="selected == 'shop'"
          src="@/assets/common/005.png"
          alt=""
          slot="icon"
        />
        <img v-else src="@/assets/common/009.png" alt="" slot="icon" />
        购物车</mt-tab-item
      >
      <mt-tab-item id="me">
        <img
          v-if="selected == 'me'"
          src="@/assets/common/010.png"
          alt=""
          slot="icon"
        />
        <img v-else src="@/assets/common/008.png" alt="" slot="icon" />
        我的</mt-tab-item
      >
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navactive: "1",
      selected: "shop",
    };
  },
  watch: {
    selected(newValue, oldValue) {
      console.log(newValue);
      if (newValue == "home") {
        this.selected = "shop";
        this.$router.push("/");
      } else if (newValue == "me") {
        this.selected = "shop";
        this.$router.push("/me");
      } else if (newValue == "liebiao") {
        this.selected = "shop";
        this.$router.push("/liebiao");
      }
    },
  },
};
</script>

<style scoped></style>
